<template>
	<view class=" page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="#0E74FF" height="74">
				<view class="u-nav-slot-left flex-center" slot="left" @click="goBack">
					<image src="@/static/images/login/fanhui.png"></image>
				</view>
				<view slot="center" class="u-nav-slot-center">
					账号注册
				</view>
			</u-navbar>
		</view>
		<view class="box">
			<view class="form-input">
				<view class="form-input-item">
					<view class="label">
						校区:
					</view>
					<view class="phone">
						<uni-data-select v-model="form.school_id" placeholder="请选择校区"
							:localdata="schoolList"></uni-data-select>
					</view>
				</view>
				<view class="form-input-item" style="margin-left: 83rpx;">
					<view class="label">
						年级:
					</view>
					<view class="phone">
						<uni-data-select v-model="form.grade_id" placeholder="请选择年级"
							:localdata="gradeList"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="form-input">
				<view class="form-input-item">
					<view class="label">
						真实姓名：
					</view>
					<view class="phone">
						<u--input placeholder="请输入真实姓名" v-model.trim="form.user_name" border="none">
						</u--input>
					</view>
				</view>
				<view class="form-input-item" style="margin-left: 83rpx;">
					<view class="label">
						昵称：
					</view>
					<view class="phone">
						<u--input placeholder="请输入昵称" v-model.trim="form.user_nickname" border="none"></u--input>
					</view>
				</view>
			</view>
			<view class="form-input">
				<view class="form-input-item">
					<view class="label">
						手机号 :
					</view>
					<view class="phone">
						<u--input placeholder="请输入手机号" v-model.number="form.mobile" border="none">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="30" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" type="text" size="mini"></u-button>
							</template>
						</u--input>
					</view>
				</view>
				<view class="form-input-item" style="margin-left: 83rpx;">
					<view class="label">
						验证码
					</view>
					<view class="phone">
						<u--input placeholder="请输入验证码" v-model="form.code" border="none"></u--input>
					</view>
				</view>
			</view>
			<view class="form-input">
				<view class="form-input-item">
					<view class="label">
						密码 :
					</view>
					<view class="phone flex-between">
						<u--input placeholder="请输入密码" :password="showPassword" v-model="form.user_pass" border="none">
						</u--input>
						<u-icon :name="!showPassword ?  'eye-fill':'eye-off' " @click="changePassword"></u-icon>
					</view>
				</view>
				<view class="form-input-item" style="margin-left: 83rpx;">
					<view class="label">
						再次输入密码：
					</view>
					<view class="phone flex-between">
						<u--input placeholder="请再次输入密码" v-model="form.user_pass_s" border="none"></u--input>
						<u-icon :name="!showPasswords ?  'eye-fill':'eye-off' " @click="changePasswordS"></u-icon>
					</view>
				</view>
			</view>
			<button class="submit flex-center" @click="submitRegister">注 册</button>
			<!-- agree：是否同意勾选  protocolArr：协议数组 @click：勾选同意点击 @protocolClick：协议点击 -->
			<cc-protocolBox :agree="agreeTwo" :protocolArr="protocolArrTwo" @click="agreeTwo = !agreeTwo"
				@protocolClick="protocolClickTwo"></cc-protocolBox>
		</view>
	</view>
</template>

<script>
	import config from '@/config.js';
	import {
		getSchoolApi,
		getGradeApi,
		loginRegApi,
		getCodeApi
	} from '@/api/index.js'
	export default {
		name: "forgetPassword",
		data() {
			return {
				form: {
					user_name: "", //真实姓名
					user_nickname: "", //昵称
					avatar: "", //头像
					mobile: "", //手机号
					user_pass: "", //密码
					birthday: "", //出生日期
					sex: "", //性别
					code: "", //验证码
					agent_id: config.agent_id, //代理商id
					school_id: "", //学校id
					grade_id: "", //年级id
					user_pass_s: "", //再次输入密码
				},
				tips: '',
				agreeTwo: false,
				protocolArrTwo: ["服务协议", "隐私政策"],
				schoolList: [],
				gradeList: [],
				showPassword: true,
				showPasswords: true
			};
		},
		created() {
			this.getSchool();
			this.getGrade();
		},
		methods: {
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			changePasswordS() {
				this.showPasswords = !this.showPasswords;
			},
			goBack() {
				this.$common.goBack()
			},
			// 获取学校
			async getSchool() {
				const {
					data: res
				} = await getSchoolApi({
					agent_id: config.agent_id
				});
				// console.log(res, '获取学校');
				const schoolList = res.data.map((item) => ({
					text: item.user_nickname,
					value: item.id
				}))
				// console.log(schoolList);
				this.schoolList = schoolList;
			},
			// 获取年级
			async getGrade() {
				const {
					data: res
				} = await getGradeApi({
					pid: 1
				});
				const gradeList = res.data.map((item) => ({
					text: item.name,
					value: item.id
				}))
				this.gradeList = gradeList;
				// console.log(res.data, '获取年级');
			},
			open() {
				this.$refs.popup.open('center')
			},
			codeChange(text) {
				this.tips = text;
			},
			change(e) {
				console.log('change', e);
			},
			codeChange(text) {
				this.tips = text;
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					if (uni.$u.test.isEmpty(this.form.mobile)) {
						uni.$u.toast('请输入手机号');
						return false
					}
					if (!uni.$u.test.mobile(this.form.mobile)) {
						uni.$u.toast('请输入正确的手机号');
						return false
					}
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					try {
						const {
							data: res
						} = await getCodeApi({
							mobile: this.form.mobile,
							type: 2, //0验证码登录，1忘记密码，2注册验证码
						});
						console.log(res);
						if (res.code === 1) {
							this.form.code = Number(res.data);
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							uni.$u.toast(res.msg);
						}
					} catch (e) {} finally {
						uni.hideLoading();
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			change(e) {
				console.log('change', e);
			},

			protocolClickTwo(tag) {

				console.log('点击协议序列 = ' + tag);
				uni.showModal({
					title: '点击协议',
					content: '点击协议序列 = ' + tag
				})
			},
			// 表单验证
			formValidation() {
				console.log('dawdawd');
				const {
					form
				} = this;
				if (!form.school_id) {
					uni.$u.toast('请选择校区');
					return false
				}
				if (!form.grade_id) {
					uni.$u.toast('请选择年级');
					return false
				}
				if (uni.$u.test.isEmpty(form.mobile)) {
					uni.$u.toast('请输入手机号');
					return false
				}
				if (!uni.$u.test.mobile(form.mobile)) {
					uni.$u.toast('请输入正确的手机号');
					return false
				}
				if (!uni.$u.test.code(form.code, 6)) {
					uni.$u.toast('请输入验证码');
					return false
				}
				if (!form.user_pass) {
					uni.$u.toast('请输入密码');
					return false
				}
				if (!form.user_pass_s) {
					uni.$u.toast('请再次输入密码');
					return false
				}
				// 新增验证密码和再次输入的密码是否一致
				if (form.user_pass !== form.user_pass_s) {
					uni.$u.toast('两次输入的密码不一致');
					return false;
				}
				return true
			},
			// 注册
			async submitRegister() {
				console.log('dwada');
				try {
					const validation = await this.formValidation();
					console.log(validation, 'validation');
					if (!validation) return
					const params = this.form;
					console.log('请求参数', params);
					const {
						data: res
					} = await loginRegApi(params);
					console.log(res);
					uni.$u.toast(res.msg);
					if (res.code === 1) {
						this.goBack();
					} else {

					}
				} catch {

				}
			}

		}
	}
</script>

<style scoped lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: #E7EBEE;
	}

	.u-nav-slot-left {
		width: px_2_vw(80);
		height: px_2_vw(80);

		image {
			width: px_2_vw(60);
			height: px_2_vw(60);
		}
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #DBD9D9;
		font-size: px_2_vw(48);

	}

	.box {
		padding: 40rpx 200rpx;

		.title {
			text-align: center;
			width: px_2_vw(375);
			height: px_2_vw(88);
			font-weight: bold;
			font-size: px_2_vw(40);
			background-size: 100% 100%;
			background-image: url('@/static/images/login/title-shouji.png');
			margin: 0 auto;
			color: #fff;
		}

		.form-input {
			color: #939292;
			display: flex;
			align-items: center;

			padding: 0rpx 0rpx 30rpx 0rpx;

			.form-input-item {
				flex: 1;
			}
		}

		.label {
			margin-bottom: 24rpx;
			color: #3B3B3B;
		}

		.phone {
			padding-bottom: 15rpx;
			border-bottom: 1rpx dashed #939292;
		}

		.submit {
			width: px_2_vw(388);
			height: px_2_vw(90);
			border-radius: 44rpx;
			background: #A4BBF5;
			color: #fff;
			border: none;
			margin-top: 30rpx;
		}
	}
</style>